// 父组件
function BoilingVerdict(props){
    if(props.celsius >= 100){
      return <p>水开了</p>
    }else{
      return <p>水还没有开</p>
    }
}

const scaleNames = {
    c: 'Celsius',
    f: 'Fahrenheit'
};

// 两个convert函数
function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}
  
function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32;
}
  
// 用于温度的转换
function tryConvert(temperature, convert) {
    const input = parseFloat(temperature);
    if (Number.isNaN(input)) {
      return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    
    return rounded.toString();
}
class TemperatureInput extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
    }
  
    render() {
      const temperature = this.props.temperature;
      const scale = this.props.scale;
      return (
        <fieldset>
          <legend>Enter temperature in { scaleNames[scale] }:</legend>
          <input value = { temperature }
                 onChange = { this.handleChange } />
        </fieldset>
      );
    }
}


// 子组件
class Calculator extends React.Component {
    constructor(props) {
      super(props);
      this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
      this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
      this.state = {temperature: '', scale: 'c'};   //默认为摄氏度
    }
  
    handleCelsiusChange(temperature) {
      this.setState({scale: 'c', temperature:temperature});
    }
  
    handleFahrenheitChange(temperature) {
      this.setState({scale: 'f', temperature});
    }
  
    render() {
      const scale = this.state.scale;
      const temperature = this.state.temperature;
      const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
      const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
  
      return (
        <div>
          <TemperatureInput
            scale = "c"
            temperature = { celsius }
            onTemperatureChange = { this.handleCelsiusChange } />
          <TemperatureInput
            scale = "f"
            temperature = { fahrenheit }
            onTemperatureChange = { this.handleFahrenheitChange } />
          <BoilingVerdict
            celsius = { parseFloat(celsius) } />
        </div>
      );
    }
  }

ReactDOM.render(
    <Calculator></Calculator>,
    document.getElementById('root')
)

